<template>
	<view class="my">
		<bangs></bangs>
		<!-- 头部 -->
		<div class="position-relative d-flex a-center" style="height: 320rpx;">
			<view
			class="iconfont icon-xiaoxi position-absolute text-white" 
			style="font-size: 50rpx;top: 75rpx;right: 20rpx;z-index: 100;"
			></view>
			
			<image src="../../static/images/bg.jpg" style="height: 320rpx;width: 100%;"></image>
			
			<view class="d-flex a-center position-absolute left-0 right-0" style="bottom: 50rpx;">
				<image :src="userinfox.avatarUrl?userinfox.avatarUrl:'/static/images/demo/demo6.jpg'" style="height: 145rpx;width: 145rpx;border: 5rpx solid;" class="rounded-circle border-light ml-4"></image>
				<view class="ml-2 text-white font-md" v-if="tokenx">
					{{ userinfox.nickName?userinfox.nickName:'登录/注册'}}
				</view>
				<view class="ml-2 text-white font-md" @click="logintoken" v-else >
					登录/注册
				</view>
			</view>
		</div>
		
		<!-- 图标分类 -->
		<card>
			<view slot="title" class="d-flex a-center j-sb w-100">
				<text class="font-md font-weight">我的订单</text>
				<view class="text-secondary font">
					全部订单 <text class="iconfont icon-you font"></text>
				</view>
			</view>
			
			<view class="d-flex a-center j-center">
				<view class="flex-1 d-flex flex-column j-center a-center py-3" v-for="(item,index) in orders" :key="index">
					<view class="iconfont font-lg line-h" :class="item.icon"></view>
					<view>{{item.name}}</view>
				</view>
			</view>
		</card>
		
		<divider></divider>
		
		<!-- 广告图 -->
		<image :src="adspictures" mode="widthFix"></image>
		
		<divider></divider>
		<uni-list-item  title="收货地址" showArrow v-if="userinfox.nickName" clickable @click="userlist">
			<template slot="header">
				<view class="iconfont icon-dingwei mr-1" style="color:#FDBF2E;"></view>
			</template>
		</uni-list-item>
		<uni-list-item  title="小米会员" showArrow>
			<template slot="header">
				<view class="iconfont icon-VIP mr-1" style="color:#FDBF2E;"></view>
			</template>
		</uni-list-item>
		<uni-list-item  title="会员中心" showArrow>
			<template slot="header">
				<view class="iconfont icon-huangguan mr-1" style="color:#FCBE2D;"></view>
			</template>
		</uni-list-item>
		<uni-list-item  title="服务中心" showArrow>
			<template slot="header">
				<view class="iconfont icon-service mr-1" style="color:#FA6C5E;"></view>
			</template>
		</uni-list-item>
		<uni-list-item  title="更多功能" showArrow>
			<template slot="header">
				<view class="iconfont icon-gengduo mr-1" style="color:#9ED45A;"></view>
			</template>
		</uni-list-item>
	</view>
</template>

<script>
	import {mapState,mapGetters,mapMutations} from 'vuex';
	import card from '@/components/common/card.vue'
	export default {
		data() {
			return {
				getcode:'',
				adspictures:'https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/181068/13/16622/771845/6102a71aE15dbe36e/c7f4953bb30e1efe.png!cr_1053x420_4_0!q70.jpg.dpg',
				extraIcon: {
					color: '#4cd964',
					size: '22',
					type:'icon-VIP' //icon名称
				},
				orders:[{
					name:"待付款",
					icon:"icon-wallet_icon",
					index:1
				},{
					name:"待收货",
					icon:"icon-daishouhuo",
					index:2
				},{
					name:"待评价",
					icon:"icon-pinglun",
					index:3
				},{
					name:"待退修",
					icon:"icon-buoumaotubiao46",
					index:4
				}]
			}
		},
		onLoad() {
			this.logincode()
		},
		components:{card},
		computed:{
			...mapState({
				tokenx:state=>state.login.tokenx,
				userinfox:state=>state.login.userinfox
			}),
		},
		methods: {
			//获取后端返回的code
			logincode(){
				uni.login({
				  provider: 'weixin',
				  success: loginRes => {
					this.getcode = loginRes.code;
				  }
				})
			},
			//根据code获取token
			logintoken(){
				this.logincode()
				this.$H.post('/user/login',{
					wxAppID:'wx87dc86b090ae2e4a',
					wxAppSecret:'4d1065c3188abc4dc52f8a3cbfd3fc6a',
					wxcode:this.getcode
				}).then(res=>{
					if(res.code === 200){
						this.settokenx(res.token);
						this.getuser()
					}else{
						uni.showToast({
							title:"token获取失败",
							icon:"error"
						})
					}
				})
			},
			//获取用户信息授权
			getuser(){
				uni.getUserProfile({
					desc:"我们将获取您的用户名,头像",
					success:e=>{
						this.setuserinfox(e.userInfo);
						uni.showToast({
							title:"登录成功",
							icon:"success"
						})
					},
					fail:error=>{
						this.setuserinfox();
						this.settokenx();
						uni.clearStorage();
					}
				})
			},
			userlist(){
				uni.navigateTo({
					url:"../user-path-list/user-path-list"
				})
			},
			...mapMutations([
				'settokenx',
				'setuserinfox'
			])
		}
	}
</script>

<style>
	.my{
		padding-bottom: var(--window-bottom);	
	}
</style>
